<template>
    <view class="wrap">
        <view class="search">
            <u-search placeholder="搜索便签" placeholder-class="placeholder" :showAction="false" bgColor="#ffffff"
                v-model="keyword" height="90" margin="10rpx 0" @clear="clearMd" search-icon-color="#0da408"
                @search="searchMd" @change="$u.debounce(searchMd, 800)">
            </u-search>
        </view>
        <u-empty text="暂无我的便签" mode="message" v-if="!MDList.length"></u-empty>
        <view class="" v-else>
            <scroll-view scroll-y="true" enable-flex style="height: calc(100vh - 180rpx);" refresher-enabled
                @refresherrefresh="handleRefresh" @scrolltolower="handleTolower()" :refresher-triggered="isRefresh"
                class="listContent">
                <view class="left">
                    <block class="itemlist" v-for="(item, index) in MDList" :key="item._id">
                        <view class="card" v-if="index%2==0" @click="toMemorandumDetail(item._id)"
                            @longpress="deleteMd(item._id)">
                            <view class="cot">
                                <view class="title">{{item.title}}</view>
                                <view class="text">{{item.content}}</view>
                            </view>
                            <view class="time">{{$u.timeFormat(item.createTime, 'mm月dd日')}}</view>
                        </view>
                    </block>
                </view>
                <view class="right">
                    <block class="itemlist" v-for="(item, index) in MDList" :key="item._id">
                        <view class="card" v-if="index%2==1" @click="toMemorandumDetail(item._id)"
                            @longpress="deleteMd(item._id)">
                            <view class="cot">
                                <view class="title">{{item.title}}</view>
                                <view class="text">{{item.content}}</view>
                            </view>
                            <view class="time">{{$u.timeFormat(item.createTime, 'mm月dd日')}}</view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <view class="publish_btn">
            <!-- <u-button shape="circle" iconColor="#31B6C3" @click="publishMD"></u-button> -->
            <view class="iconfont icon-jiajianzujianjiahao" @click="publishMD">

            </view>
        </view>
    </view>
</template>

<script>
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                keyword: '',
                MDList: {},
                isRefresh: false, // 标示scroll-view下拉刷新是否被触发
                token: null,
            }
        },
        onLoad() {
            this.token = uni.getStorageSync("token") || getApp().globalData.token
            this.getMemorandumList()
            uni.$on("getMd", () => {
                this.getMemorandumList()
            })
        },
        methods: {
            setColor(e) {
                // 代表在搜索关键字中存在相匹配的串
                console.log(this.keyword.indexOf(e) == -1);
                if (this.keyword.indexOf(e) == -1) {
                    return 'color:#007AFF;'
                }
            },
            clearMd() {
                this.keyword = ''
                this.getMemorandumList()
            },
            toMemorandumDetail(id) {
                uni.navigateTo({
                    url: '/subpages/memorandum/publishMD?id=' + id
                })
                console.log(id);
            },
            searchMd() { // 搜索便签
                cloudApi.call({
                    name: 'memorandum',
                    data: {
                        api: 'searchMd',
                        keyword: this.keyword
                    },
                    success: res => {
                        console.log(res);
                        this.MDList = res.result.data
                        this.setColor()
                    }
                })
            },
            deleteMd(id) {
                console.log("长按触发事件?", id)
                uni.showModal({
                    title: '是否删除此便签？',
                    confirmColor: '#0099ff',
                    cancelColor: '#000000',
                    success: async (res) => {
                        if (res.confirm) {
                            cloudApi.call({
                                name: 'memorandum',
                                data: {
                                    api: 'MdById',
                                    action: 'delete',
                                    _id: id
                                },
                                success: res => {
                                    console.log(res);
                                    uni.$emit('getMd')
                                    this.$showToast('删除成功', 'none')
                                }
                            })
                        }
                    }
                })
            },


            getMemorandumList() {
                cloudApi.call({
                    name: 'memorandum',
                    data: {
                        api: 'getMemorandumApi',
                        token: this.token
                    },
                    success: (res) => {
                        this.MDList = res.result.data
                        this.isRefresh = false
                    },
                    fail: err => {
                        this.$showToast('获取失败', 'none')
                    }
                })
            },
            publishMD() { // 发布备忘录 跳转
                uni.navigateTo({
                    url: '/subpages/memorandum/publishMD'
                })
            },
            handleTolower() { // 自定义上拉加载

            },
            handleRefresh() { // 下拉刷新
                uni.showLoading({
                    title: '正在刷新'
                })
                setTimeout(() => {
                    this.getMemorandumList()
                    this.$showToast('刷新成功', 'none')
                }, 1000)
                this.isRefresh = true
            },
        }
    }
</script>

<style lang="scss">
    .wrap {
        padding: 0 15rpx;

        .search {
            margin: 20rpx 30rpx;

            .placeholder {
                font-size: 38rpx;
            }
        }

        .publish_btn {
            position: fixed;
            bottom: 5vh;
            right: 5vh;

            width: 100rpx;
            height: 100rpx;
            background-color: rgb(255, 192, 1);
            border-radius: 50%;
            line-height: 100rpx;

            .iconfont {
                color: #fff;
                font-size: 40rpx;
                text-align: center;
            }
        }

        .listContent {

            .left,
            .right {
                display: inline-block;
                vertical-align: top;
                width: 49%;
            }

            .itemlist {
                background-color: #fff;
                margin: 1%;
                margin-bottom: 20upx;
                display: inline-block;

            }

            .card {
                margin: 20rpx 10rpx;
                background-color: #ffffff;
                border-radius: 20rpx;
                padding: 30rpx 25rpx;
                box-shadow: 0 0 10px #ddd;
                /* 盒子阴影*/

                .cot {

                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        margin-bottom: 10rpx;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .text {
                        color: #666;
                        font-size: 26rpx;
                        overflow: hidden;
                        margin-bottom: 15rpx;
                        line-height: 50rpx;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        /*设置对其模式*/
                        -webkit-line-clamp: 4;
                        /*设置多行的行数*/
                    }

                    .time {
                        color: #666;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }
</style>
